<style lang="scss" scoped>

  $line-height:45px;

  $slider-height:24px;

  $bg_color:white;

  $slider_active:red;

  $check_color:#00C6F0;

  .chart-line{
    width:100%;
    height: $line-height;
    background: $bg_color;
    border-bottom: 1px solid #ccc;
    position: relative;
    clear: both;
    .slider{
      height: $slider-height;
      width: 40%;
      background: $slider_active;
      position: absolute;
      top:10px;
      left:0;
      z-index: 101;
      display: block;
      clear: both;
      /*&:active{*/
        /*cursor: move;*/
      /*}*/
    }

    .check-slider{
      height: $slider-height;
      width: 10px;
      background: $check_color;
      position: absolute;
      top:10px;
      left:0;
      z-index: 102;
      display: block;
      clear: both;
      &:active{
        cursor: move;
      }
    }

  }

</style>

<template>
  <!--<div class="chart-line">-->
  <!--<div class="slider" @mousedown="onMouseDown" @mounsemove="" @mouseup="onMouseUp"></div>-->
  <!--</div>-->
  <div class="chart-line" ref="parent">
    <div class="slider" ref="slider" @click="edit" :data-primary-index="index" :data-sub-index="subIndex" :title="format(startDate)+' 至 '+format(endDate)">
      <slot></slot>
    </div>
    <div class="check-slider" @click="cancelEdit" ref="check" v-show="check.state" :title="format(check.start)+' 至 '+format(check.end)">
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      index:{
        type:Number,
        required:true,
        default:0
      },
      subIndex:{
        type:Number,
        required:true,
        default:0
      },
      startDate:{
        type:String,
        required:true,
        default:new Date().getFullYear()+'-1-1'
      },
      endDate:{
        type:String,
        required:true,
        default:new Date().getFullYear()+'-1-1'
      },
      /**
       * 基本时间的参数 主要是用来绘制基本的时间
       */
      size:{
        type:Object,
        required:true,
        default:{
          width:0,
          left:0
        }
      },
      width:{
        type:Number,
        required:true,
        default:0
      },
      editable:{
        type:Boolean,
        required:true,
        default:false
      },
      /**
       * 检查时间的参数 主要是用来绘制检查时间的位置
       */
      check:{
        type:Object,
        required:true,
        default: function () {
          return {
            state:0,
            width:0,
            left:0,
            start:"",
            end:""
          };
        }
      }
    },
    data(){
      return {

      }
    },
    mounted(){

      /**
       * 绘制横道单元在图上的位置
       */
      this.setPosition();

      this.setCheckLayer();

    },
    updated(){
      /**
       * 重汇横道在图上的位置
       */
      this.setPosition();

      this.setCheckLayer();

    },
    computed:{

    },
    watch:{
      width(){

        var parentDOM=this.$refs['parent'];

        parentDOM.style.width = this.width+'px';

      },
      check:{
        handler(newValue,oldValue){

         this.setCheckLayer();

        },
        deep:true
      }
    },
    methods:{
      cancelEdit(){

        this.$confirm('当前添加的检查时间将会被删除，要确认吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.$emit("cancel",{
            pIndex:this.index,
            index:this.subIndex
          });

          this.$message({
            message: '删除成功!'
          });

        })

      },
      format(input){

        if (input==""){
          return "未知时间";
        }

        var date = new Date(input);

        return date.toLocaleDateString();
      },
      edit($event){

        var target=$event.target;

        if (target.className.indexOf('slider')<0){
          return false;
        }

        if(!this.editable){
          return false;
        }

        this.$emit('edit',{
          pIndex:this.index,
          subIndex:this.subIndex,
          dateRestrict:{
            start:this.startDate,
            end:this.endDate
          }
        });

      },
      setPosition(){

        var parentDOM=this.$refs['parent'];

        parentDOM.style.width = this.width+'px';

        var targetDOM=this.$refs['slider'];

        targetDOM.style.width=this.size.width+'px';

        targetDOM.style.left=this.size.left+'px';

      },
      setCheckLayer(){

        var fixDOM=this.$refs['check'];

        var _width=this.check.width;

        if (this.check.width==0){
          _width=7;
        }

        fixDOM.style.width=_width+'px';

        fixDOM.style.left=this.check.left+'px';

      },
      /**
       * 给滑块+mousedown事件
       */
      onMouseDown($event){

        var self=this;

        var target=$event.target;

        var oEvent = $event;

        //获取按下鼠标到div left  top的距离
        var distanceX = oEvent.clientX - target.offsetLeft;
        var distanceY = oEvent.clientX - target.offsetTop;

        //添加doc滑动时间
        document.onmousemove = function (evt) {
          var oEvent = evt || event;
          //重新计算div的left top值
          var left = oEvent.clientX - distanceX;
          var top = oEvent.clientY - distanceY;
          //left  当小于等于零时，设置为零 防止div拖出document之外
          if (left <= 0) {
            left = 0;
          }
          //当left 超过父级右边界设置为右边界
          else if (left >= self.$refs['container'].offsetWidth - target.offsetWidth) {
            left = self.$refs['container'].offsetWidth - target.offsetWidth;
          }

          //整数
          target.style.left = left + "px";
        }
      },
      /**
       *
       * @param $event
       */
      onMouseUp($event){

        var self=this;

        var target= $event.target;


        document.onmousemove = null;

        target.onmouseup = null;

        //总的header格子的个数
        var count=this.currentTotal;

        //每个格子的宽度
        var fixPerLeft=CONTAINER_WIDTH/count;

        //定格在哪个格子上
        var Counter=Math.floor(target.offsetLeft/fixPerLeft);

        target.style.left = Counter*fixPerLeft + "px";

      }
    }
  }
</script>
